<template>
  <el-form :model="form" :rules="rules" ref="ruleForm">
    <el-form-item prop="username"
      ><el-input v-model="form.username" prefix-icon="el-icon-user-solid"
    /></el-form-item>
    <el-form-item prop="password"
      ><el-input
        v-model="form.password"
        prefix-icon="el-icon-unlock"
        type="password"
    /></el-form-item>

    <el-form-item>
      <el-button type="primary" @click="login">登录</el-button>
      <el-button type="danger" @click="resetform">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { defineComponent, reactive, toRefs, ref } from "vue";
import { ElMessage, ElNotification } from "element-plus";
import router from "../router/router.js";
import { loginin } from "../api/login.js"; // 导入封装好的请求接口方法
export default defineComponent({
  name: "~login",
  setup(props, { emit, slots }) {// setup相当于created生命周期
    const state = reactive({
      ruleForm: ref(null),
      form: { username: "admin", password: "123456" },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 10, message: "min is 3, max is 10!", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 10, message: "min is 6, max is 10", trigger: "blur" },
        ],
      },
      resetform() {
        state.ruleForm.resetFields();
      },
      login() {
        router.push("/");
        // state.ruleForm.validate(async (valid) => {
        //   if (!valid) return ElMessage.error("验证未通过");
        //   const params = {
        //     username: state.form.username,
        //     password: state.form.password,
        //   };
        //   loginin(params).then((res) => {
        //     // 发起登录请求
        //     console.log(res);
        //     if (res.data.code !== 0) return ElMessage.error("登录失败");
        //     sessionStorage.setItem("token", res.data.token);
        //     router.push("/");
        //     ElNotification({
        //       title: "提示",
        //       type: "success",
        //       message: "登录成功",
        //     });
        //   });
        // });
      },
    });

    return {
      ...toRefs(state),
    };
  },
});
</script>

<style lang='css' scoped>
.el-form {
  width: 450px;
  height: 300px;
  background-color: #fff;
  border-radius: 3px;
  margin: 0 auto;
  padding: 20px 30px;
}
</style>
